import React from 'react'
import {axiosGet} from '../../axios'
import {url,personalizedmv,mv} from '../../api'
import {VideoCameraOutlined,PlayCircleOutlined } from '@ant-design/icons'
import {observer,inject} from 'mobx-react'
import {withRouter} from 'react-router'

@inject('mv')@observer
class MvRecommended extends React.Component {
    constructor(props){
        super(props)
        this.state = {
            mvRecommended:''
        }
    }
    componentDidMount(){
        this.getMvRecommended()
    }
    //  获取推荐mv
    getMvRecommended(){
        axiosGet(url,personalizedmv,'limit=4')
        .then((data)=>{
            this.setState({
                mvRecommended:data.result
            })
        })
    }
        //  设置mv的地址并跳转
        setVideo(item){
            axiosGet(url,mv,`mvid=${item.id}`)
            .then((data)=>{
                this.props.mv.setMvUrl(data.data.brs['480'])
                this.props.mv.setmvDetail(data.data)
            })
            this.props.history.push('/mvDetail')
        }
    render(){
        return(
        <div className='recommended-mv'>
            <h3>推荐MV</h3>
            <div className='recommended-mv-item' >
                {this.state.mvRecommended &&
                    this.state.mvRecommended.map((item,index)=>{
                        return(
                            <div key={index} className='item' onClick={()=>{this.setVideo(item)}}>
                                <p className='play-count'><VideoCameraOutlined  style={{marginRight:'5px'}}/>{item.playCount}</p>
                                <img src={item.picUrl} alt=""></img>
                                <p className='name'>{item.name}</p>
                                <p className='singer-name'>{item.artistName}</p>
                                <PlayCircleOutlined className='play-icon' />
                            </div>
                        )
                    })

                }
            </div>
        </div>
        )
    }
}
export default withRouter(MvRecommended)
